<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>任务管理</el-breadcrumb-item>
        <el-breadcrumb-item>任务列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 搜索栏-->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form :model="taskQuery" inline>
        <el-form-item label="任务标题">
          <el-input v-model="taskQuery.taskTitle"/>
        </el-form-item>
        <el-form-item label="任务状态">
          <el-select style="width: 100px" v-model="taskQuery.taskStatus">
            <el-option :value="0" label="全部"/>
            <el-option :value="1" label="正常"/>
            <el-option :value="2" label="暂停"/>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
              v-model="startTimes"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
              v-model="endTimes"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="loadTasks" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <!-- 工具栏 -->
  <el-row style="margin: 0px 10px;background-color: ghostwhite;padding: 0px 10px">
    <el-col :span="24">
      <el-button-group >
        <el-button :disabled="curUserId!=project.userId"  @click="toAddTask" type="primary">新增</el-button>
        <el-button :disabled="curUserId!=project.userId"  @click="toEdit" type="primary">编辑</el-button>
        <el-button :disabled="curUserId!=project.userId"  @click="toDeletes" type="primary">删除</el-button>
      </el-button-group>
    </el-col>
  </el-row>
  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="tasks" border stripe
                row-key="taskId"
                lazy
                :load="loadChildrenTask"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                @expand-change="expandChange"
                :expand-row-keys="expandRowKeys"
                ref="taskTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="taskId" label="#">
          <template #default="scope">
            <el-link @click="showDetail(scope.row.taskId)" type="success">
              {{ scope.row.taskId }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="taskTitle" label="任务标题"/>
        <el-table-column prop="user.username" label="负责人"/>
        <el-table-column label="任务工期" prop="taskDuration"/>
        <el-table-column prop="startTime" label="开始时间"/>
        <el-table-column prop="endTime" label="结束时间"/>
        <el-table-column prop="taskStatus" label="项目状态">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.taskStatus == 1">正常</el-tag>
            <el-tag type="primary" v-else-if="scope.row.taskStatus == 2">暂停</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column label="操作" width="330">
          <template #default="scope" >

            <el-link @click="toAddSubTask(scope.row)" :disabled="curUserId!=project.userId" style="margin: 0px 5px" type="primary"><el-icon><Plus /></el-icon>新增</el-link>
            <el-link @click="toEditTask(scope.row)" :disabled="curUserId!=project.userId" style="margin: 0px 5px" type="primary"><el-icon><EditPen /></el-icon>编辑</el-link>
            <el-link @click="toDeleteTask(scope.row)" :disabled="curUserId!=project.userId" style="margin: 0px 5px" type="primary"><el-icon><Delete /></el-icon>删除</el-link>

          <el-link  style="margin: 0px 5px" type="primary"><el-icon><Message /></el-icon>评论</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>


  <!-- 新增弹窗组件 -->
  <taskAdd @cancelTaskAdd="cancelTaskAdd" @add-complete="addTaskComplete" :project="project" :is-show="addWinIsShow" :parent-task="parentTask"/>
  <!-- 编辑任务的弹窗组件 -->
  <task-edit :project="project" :task-id="editTaskId"
             @cancel-task-edit="cancelTaskEdit"
             @edit-complete="editComplete"/>

  <!-- 任务详情弹窗 -->
  <el-dialog
      title="任务详情"
      v-model="taskVisible"
      width="500">
    <el-form :model="taskDetails" label-width="120px">
      <el-form-item label="任务编号">
        <el-input v-model="taskDetails.taskId" readonly></el-input>
      </el-form-item>
      <el-form-item label="任务标题">
        <el-input v-model="taskDetails.taskTitle" readonly></el-input>
      </el-form-item>
      <el-form-item label="任务描述">
        <el-input type="textarea" v-model="taskDetails.taskDesc" readonly></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker v-model="taskDetails.startTime" type="date" readonly></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-model="taskDetails.endTime" type="date" readonly></el-date-picker>
      </el-form-item>
      <el-form-item label="进度">
        <el-input type="number" v-model="taskDetails.taskProgress" readonly/>
      </el-form-item>
      <el-form-item label="任务状态">
        <el-input type="text" v-model="taskDetails.taskStatus" readonly/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="taskVisible = false">关闭</el-button>
  </span>
  </el-dialog>


  <!--      删除节点是父节点的弹窗-->
  <el-dialog v-model="dialogUserVisible" title="删除对象警告">
    <el-table :data="dialogContent">
      <el-table-column prop="taskId" label="以下任务存在子任务" width="180">
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
              <el-button @click="dialogUserVisible.value = false">关闭</el-button>
            </span>
  </el-dialog>


</template>

<script setup>
import {onMounted,onBeforeMount, ref} from "vue";
import {useRouter,useRoute} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";
import projectRequest from "@/api/project.js";
import taskRequest from "@/api/task.js";
import taskAdd from "@/views/task/task-add.vue"
import TaskEdit from "@/views/task/task-edit.vue";
// 封装搜索条件
let taskQuery = ref({});
// 封装查询的列表数据
let tasks = ref([]);
// 当前路由对象
let route = useRoute();
// 全局路由对象
let router = useRouter();
// 申明对象保存当前的项目对象
let project = ref({});// 不需要申明为响应式对象
// 当前用户编号
let curUserId = ref(-1);
let expandRowKeys = ref([]);
let addWinIsShow = ref(false);
let parentTask = ref(null);
// 当前要编辑的任务的编号，默认是-1
let editTaskId = ref(-1);

/**
 * 行级编辑按钮事件
 * @param task
 */
function toEditTask(task){
  editTaskId.value = task.taskId;
}
/**
 * 编辑完成的事件
 */
function editComplete(){
  // 更新数据表
  cancelTaskEdit();
  loadTasks();
}

/**
 * 编辑取消的事件
 */
function cancelTaskEdit(){
  // 将editTaskId修改为-1
  editTaskId.value = -1;
}


function expandChange(row,expanded){
  console.log(expandRowKeys)
}
/**
 * 工具栏新增按钮事件
 */
function toAddTask(){
  addWinIsShow.value = true;
}

/**
 * 行级新增任务事件
 * @param task
 */
function toAddSubTask(task){
  console.log(task)
  parentTask.value = task;
  addWinIsShow.value = true;
}

/**
 * 新增任务完成的监听事件
 */
function addTaskComplete(task){
  // if (task.taskParentId == 0){
  loadTasks(0);
  // }else{
  //
  // }
}
/**
 * 取消新增的事件
 */
function cancelTaskAdd(){
  addWinIsShow.value = false;
  parentTask = ref(null);
}
//获取多选框的数据
const rows = ref([]);
const select = ref(null); // 需要定义一个 ref 对象来保存选择的任务
function handleSelectionChange(selection) {
  rows.value = selection;
}
//工具栏的修改任务
function toEdit(){
  if (rows.value.length == 1) { // 确保有选择的任务
    select.value = rows.value[0]; // 获取第一个选择的任务
    toEditTask(select.value); // 传递 select.value 给 toEditTask
  } else {
    alert('只能选择一个任务修改！');   // 如果没有选择任务，输出警告
  }
}
//多选删除任务
//定义taskId数组
const  nonDelHandleTaskIds = ref([]);
const dialogContent = ref([]);
const dialogUserVisible = ref(false);

function toDeletes() {
  //选中的任务
  const nonDelHandleTasks = rows.value;
  console.log(nonDelHandleTasks); // 打印所有选中的任务
  console.log(curUserId); // 打印当前用户ID
  // 提取 taskId
  nonDelHandleTaskIds.value = nonDelHandleTasks.map(task => task.taskId);
  // 提取 taskParent
  const taskParents = nonDelHandleTasks.map(task => task.taskParent);
  console.log(taskParents); // 输出所有 taskParent 值
  // 查找 taskParent 为 1 的任务
  const tasksWithParentOne = nonDelHandleTasks.filter(task => task.taskParent === 1);
  console.log(tasksWithParentOne); // 输出 taskParent 为 1 的任务

  // 判断是否存在 taskParent 为 1 的任务
  if (tasksWithParentOne.length > 0) {
    // 设置弹窗内容
    dialogContent.value = tasksWithParentOne;
    dialogUserVisible.value = true; // 显示弹窗
  }else {
    // 显示确认删除弹窗
    ElMessageBox.confirm(
        '当前任务没有父任务，你确定要删除吗?',
        '确认删除？',
        {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning'
        }
    ).then(() => {
      // 用户确认删除
      nonDelHandleTaskIds.value.forEach(taskId => {
        console.log(taskId)
        taskRequest.deleteByTaskId(taskId, res => {
          ElMessage.success(`Successfully deleted task with ID ${taskId}`);
        });
      });
    }).catch(() => {
      // 用户取消删除
      ElMessage.info('删除取消');
    });
  }
}


//删除任务
function toDeleteTask(task) {
  // 提示用户是否确认删除
  if (confirm('确定要删除这个任务吗？')) {
    // 用户点击确认，执行删除操作
    taskRequest.delete(task, (response) => {
      if (response.code === 1) {
        alert('任务成功删除'); // 显示成功提示
        loadTasks(); // 重新加载任务列表
      } else {
        // console.error('删除任务失败:', response.msg);
        alert('删除任务失败，请稍后重试。'); // 显示失败提示
      }
    });
  } else {
    // 用户点击取消，什么都不做
    console.log('用户取消了删除操作');
  }
}

/**
 * 任务详情
 * @param task
 */
//默认项目详情弹窗不显示
const taskVisible = ref(false);
//封装项目详情用户的数据
let taskDetails = ref({});
//点击显示项目详情
function showDetail(taskId){
  //开启弹窗
  taskVisible.value = true;
  //通过id加载任务
  taskRequest.getById(taskId,res=>{
    taskDetails.value = res.data;
    console.log(taskDetails);
  })
}

/**
 * 加载子任务列表
 * @param task 当前这一行数据对象
 * @param node  树节点
 * @resole 函数，用来将我们的数据加入到列表中
 */
function loadChildrenTask(task,node,resole){
  // 加载数据
  taskRequest.loadTaskByProjectId(project.value.projectId,task.taskId,res=>{
    // 调用resole函数将查询的结果加入列表
    resole(res.data);
    console.log(tasks)
  })
}

/**
 * 加载任务列表
 * @param parentId 父任务编号
 */
function loadTasks(parentId){
  // 通过API加载任务列表
  taskRequest.loadTaskByProjectId(project.value.projectId,parentId,res=>{
    tasks.value = res.data;
  })
}

/**
 * 加载当前的项目对象
 * @param projectId
 */
function loadProject(projectId){
  projectRequest.loadProjectById(projectId,res=>{
    project.value = res.data;
    // 默认加载一级任务
    loadTasks(0);
  })
};


onBeforeMount(()=>{
  // 获取用户编号
  curUserId = localStorage.getItem("userId");
  console.log(curUserId);
  // 获取路由中的参数
  let projectId = route.params.projectId
  if(projectId){
    // 加载项目对象
    loadProject(projectId);
  }else{
    ElMessage({
      type:"info",
      message:"程序出现问题，程序员被祭天!"
    })
    router.push("/home");
  }
})
</script>

<style scoped>

</style>